<template>
	<view class="content display displayColumn ">
		<u-navbar title="个人中心" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<view class="appoint_left display  " slot="left">
				<uni-icons type="left" size="18" color="#000"></uni-icons>
			</view>
			<view class="apponit_center display " slot="center">
				<span class="title_txt fontSize font_comm">填写预约单</span>
			</view>
		</u-navbar>
		<!-- 预约项目 -->
		<view class="appoint_xiangmu display  width-100 M-T-30">
			<span class="fontSize font_comm appoint1_txt M-L-30">预约项目</span>
		</view>
		<!-- 卡片  预约项目展示 -->
		<!-- <view class="appoint_card display  width-100 all_item" style="margin-top: 20rpx;">
			<card></card>
		</view> -->
		<!-- 预约洗车和到店洗车按钮 -->
		<!-- <view class="two_button display  M-T-24">
			<view class="two_button_all display  M-L-30 M-R-30">
				<button
					:class="{fontSize:true, display:true, font_comm:true, appoint1:true,bg1:selectIndex==1, bg2:selectIndex!=1,all_item:true,}"
					@click="appoint(1)">预约洗车</button>
				<button
					:class="{fontSize:true, display:true, font_comm:true, appoint2:true, all_item:true,bg1:selectIndex==2,bg2:selectIndex!=2}"
					@click="appoint(2)">到店洗车</button>
			</view>
		</view> -->
		<!-- 填写信息  可以切换的内容-->
		<view class="display  tianxieinfo displayColumn width-100" style="margin-top: 36rpx;">
			<!-- 师傅信息 -->
			<view class="shifuInfo display  displayColumn width-100" v-if="selectIndex==1">
				<view class="shifuInfo_all display  displaycenter_aliem">
					<img class="M-L-30" src="@/static/img2/shifu.png" alt="" />
					<span style="margin-left: 10rpx;" class="fontSize font_comm ">选择师傅</span>
				</view>
				<!-- 选择滑动舒服信息 -->
				<view class="shifu_select display  width-100 all_item" style="margin-top: 12rpx;" v-if="selectIndex==1">
					<view class="change_swiper display  ">
						<scroll-view class="scroll-view_H" :scroll-x="true">
							<view class="item ">
								<block v-for="(item,index) in jishiArr" :key="index">
									<view class="item_all display  displayColumn all_item" style="margin-left: 30rpx;"
										@click="tochangeshifu(index)">
										<img style="position: absolute;width: 80rpx;height: 80rpx;top: 25rpx;" class=""
											src="@/static/img2/Ellipse2.png" alt="" v-if="shifuindex == index" />
										<img style="width: 75rpx;height: 75rpx;border-radius: 50%;"
											src="@/static/img/car-manage.png" alt="" /> 
										
										<span class="fontSize font_comm name_txt" style="margin-top: 10rpx;">{{item.userName}}</span>
										<span class="fontSize font_comm nianling_txt"
											style="margin-top: 10rpx;">工龄：6年</span>
									</view>
								</block>
							</view>
						</scroll-view>
					</view>
				</view>

			</view>

			<view class="display  arrvice_time width-100 displayColumn " v-if="selectIndex==1">
				<view class="name_img display  displaycenter_aliem">
					<img style="width: 32rpx;height: 32rpx;margin-left: 30rpx;" src="@/static/img2/naozhong.png"
						alt="" />
					<span class="fontSize font_comm" style="margin-left: 8rpx;">到达洗车站时间</span>
				</view>
				<view class="wode_swiper all_item display  width-100" style="margin-top: 24rpx;">
					<view class="fn_swiper display  displayColumn width-100">
						<view class="fn_swiper_top ">
							<scroll-view class="scroll-view_H1" :scroll-x="true">

								<view class="item ">
									<block v-for="(item,index) in timeArr" :key="index">
										<view class="item_all display  displayColumn all_item"
											style="margin-left: 50rpx;" @click="changetime(index)">
											<span
												:class="{fontSize:true, font_comm:true, time1:selectTime!=index,time3:selectTime==index}">{{item.day}}</span>
											<span
												:class="{fontSize:true, font_comm:true, time2:selectTime!=index,time4:selectTime==index}">{{item.week}}</span>
										</view>
									</block>
								</view>
							</scroll-view>
							<view class="wode_lines1"></view>
						</view>
						<view class="fn_swiper_bottom display  displayColumn ">
							<view class="fn_swiper_bottom_one display  width-100 displaycenter_aliem">
								<span
									:class="{fontSize:true, font_comm:true, baitian:selectIndex1 !=1,wanshang:selectIndex1==1,'M-L-24':true}"
									@click="changeTimes(1)">白天 13:30-18:30</span>
								<span
									:class="{fontSize:true, font_comm:true,  baitian:selectIndex1 !=2,wanshang:selectIndex1==2,'M-R-24':true}"
									@click="changeTimes(2)">晚上 19:00-21:00</span>
							</view>
							<!--选择时间  -->
							<view class="select_times display  width-100" style="margin-top: 16rpx;">
								<view class="select_times_all display  width-100 displaycenter_aliem">
									<block v-for="(item,index) in timeLightArr" :key="index">
										<view
											:class="{one_time:!item.checked,one_time2:item.checked, display:true,  all_item:true,}"
											@click="changeLight(index)" style="margin-left: 20rpx" v-if="!item.flag">
											<span class="fontSize font_comm ">{{item.time}}</span>
										</view>
										<view class="one_time1 display  all_item" style="margin-left: 20rpx" v-else
											@click="showwo">
											<span class="fontSize font_comm ">{{item.time}}</span>
											<view class="wode_kuai display all_item" style="margin-left: 8rpx;">
												<span class="fontSize font_comm">满</span>
											</view>
										</view>
									</block>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="one display  width-100 displayColumn" style="margin-top:36rpx ;">
				<!-- 填写信息 -->
				<view class="one_one display  width-100 width-100 displaycenter_aliem">
					<img class="img M-L-30" src="@/static/img2/biji.png" alt="" />
					<span class="fontSize font_comm wode_txt" style="margin-left: 6rpx;">填写信息</span>
				</view>
				<view class="two display width-100 displayColumn all_item  M-T-24">
					<view class="two_two display displayColumn ">
						<view class="fn_one M-T-24 display  width-100  displaycenter_aliem">
							<span class="fontSize font_comm yuyueren_txt" style="margin-left: 24rpx;">*预约人</span>
							<input v-model="formDate.name" type="text" placeholder="请输入" placeholder-style="color: #72778A"
								class="inputs fontSize font_comm" style="margin-left: 44rpx;" />
						</view>
						<view class="fn_one M-T-24 display  width-100  displaycenter_aliem">
							<span class="fontSize font_comm yuyueren_txt" style="margin-left: 24rpx;">*联系方式</span>
							<input v-model="formDate.phonenumber" type="text" placeholder="请输入联系方式" placeholder-style="color: #72778A"
								class="inputs fontSize font_comm" style="margin-left: 18rpx;" />
						</view>
						<view class="fn_one M-T-24 display  width-100  displaycenter_aliem">
							<span class="fontSize font_comm yuyueren_txt" style="margin-left: 24rpx;">车牌号</span>
							<uni-data-select class="wode_select" v-model="value" :localdata="range" @change="change"
								:clear="false" label="请选择"></uni-data-select>

							<button class="wode_button fontSize font_comm display all_item" @click="add">添加</button>
						</view>
						<view class="fn_one2 M-T-24 display  width-100  ">
							<span class="fontSize font_comm yuyueren_txt" style="margin-left: 24rpx;">备注</span>
							<textarea v-model="formDate.beizhu" style="margin-left: 88rpx;" placeholder="需要体验叮嘱什么" class="wode_texteare"
								placeholder-class="plac_txt fontSize font_comm"></textarea>
						</view>
					</view>
				</view>
			</view>



		</view>
		<!-- 到达洗车站时间 -->

		<!-- 底部导航栏 -->
		<view class="bottom_tabber ">
			<view class="fn1_one display  displaycenter_aliem">
				<span class="fontSize font_comm M-L-30">金额：<span
						style="font-size: 30rpx;">￥{{json.washOrderAmount}}</span></span>

				<button class="fontSize font_comm display all_item" @click="appoints">立即预约</button>
			</view>
		</view>
	</view>
</template>

<script>
	// import { initday } from '@/utils/commons.js';
	import card from './card.vue'
	
	export default {
		components: {
			card

		},
		data() {
			return {
				selectIndex: 1,
				selectIndex1: 1,
				selectTime: 0,
				shifuindex: 0, //师傅的索引
				lightIndex: 0, //时间段
				formDate:{
					name:'',//姓名
					phonenumber:'',//联系方式
					beizhu:'',//备注
					chepai:'',//车牌号
				},
				zhifuInfo:{},//支付信息
				json: {},
				timeArr: [],
				jishiArr:[],
				value:'',
				range: [],
				timeLightArr: [{
						time: '13:30-15:30',
						flag: false, //代表不满
						checked: true, //是否选中
					},
					{
						time: '15:30-17:30',
						flag: false,
						checked: false,
					},
					{
						time: '17:30-19:30',
						flag: false,
						checked: false,
					}
				],
				list: [{
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
				}]

			}
		},
		onLoad(options) {

			this.json = JSON.parse(options.json);
			// 获取师傅列表
			
			this.getShifulist();
			// 获取时间
			
			this.initTime();
			
		},
		onShow(){
			// 获取汽车牌号
			this.carList();
		},
		methods: {
			// 师傅的索引
			tochangeshifu(index) {
				this.shifuindex = index
			},
			appoint(index) {
				this.selectIndex = index;
			},
			// 车牌选择
			change(e) {
				console.log("e:", e);
				
				for(let i=0;i<this.range.length;i++){
					if(this.range[i].value == e){
							this.formDate.chepai = this.range[i].text
							console.log(this.formDate.chepai)
							break;
					}
				}
			},
			changetime(e) {
				this.selectTime = e;
				console.log(this.selectTime)
			},
			// 切换白天和晚上
			changeTimes(index) {
				// index 1白天 2晚上
				this.selectIndex1 = index
				if (this.selectIndex1 == 2) {
					this.timeLightArr = [{
							time: '19:30-20:30',
							flag: false, //代表不满
							checked: true, //是否选中
						},
						{
							time: '20:30-21:00',
							flag: false,
							checked: false,
						},
						{
							time: '21:30-24:30',
							flag: false,
							checked: false,
						}
					]
				} else {
					this.timeLightArr = [{
							time: '13:30-15:30',
							flag: false, //代表不满
							checked: true, //是否选中
						},
						{
							time: '15:30-17:30',
							flag: false,
							checked: false,
						},
						{
							time: '17:30-19:30',
							flag: false,
							checked: false,
						}
					]
				}
			},
			changeLight(index) {
				console.log(index)
				this.timeLightArr[index].checked = true;
				for (let i = 0; i <= this.timeLightArr.length - 1; i++) {
					if (i != index) {
						this.timeLightArr[i].checked = false;
					}
				}
				// 时间段已满提示

			},
			showwo() {
				this.$modal.showToast('该时间段已满');
			},
			// 立即预约
			appoints() {
				// 立即预约
				//验证 姓名不为空 
				
				if(this.formDate.name=='' ){
					this.$modal.showToast('预约人不得为空')
					return;
				}
				
				// 手机号验证
				if(!uni.$u.test.mobile(this.formDate.phonenumber)){
					this.$modal.showToast('请输入正确的联系方式')
					return;
				}
				
				
				
				// 请求接口
				//时间selectTime
				let time1 = this.timeArr[this.selectTime].day;
				// 白天还是黑天 selectIndex1 1白天 2黑天
				// 时间段 this.timeLightArr
				let shijianduan = '';
				for(let i=0;i<this.timeLightArr.length;i++){
					if(this.timeLightArr[i].checked){
						shijianduan = this.timeLightArr[i].time;
					}
				}
				console.log(this.json)
				// 师傅  this.shifuindex  this.jishiArr
				let data = {
					userId:this.json.userId,//用户id
					stationId:this.json.stationId,//系车站id
					workerId:this.jishiArr[this.shifuindex].id,//技工id
					workerName:this.jishiArr[this.shifuindex].userName,//技工名称
					workerPhonenumber:this.jishiArr[this.shifuindex].phonenumber,//技工手机号码
					memberType:this.json.memberType,//会员类型
					reservationTime:shijianduan,//预约时间
					artificialCarType:`${this.json.artificialCarType}`,//车型
					artificialCarTitle:this.json.artificialCarType == 0 ? '轿车' :this.json.artificialCarType == 1 ? 'SUV' :'货车',//车型标题
					artificialServiceType:'1',//服务类型	0普洗 1精细
					reservationCarLicensePlate:this.formDate.chepai,//车牌
					reservationPhone:this.formDate.phonenumber,//预约人手机号
					reservationName:this.formDate.name,//预约人姓名
					washOrderAmount:this.json.washOrderAmount,//订单金额
					doorId:this.json.doorId,//工位id
					doorName:this.json.doorName,//工位名称
					reservationDay:time1,//日期
					artificialServiceTitle:'精洗',//服务标题
					remark:this.formDate.beizhu,//备注
				}
						console.log(data);
						this.zhifuInfo.price =this.json.washOrderAmount
						//跳转支付确认页面
						this.$tab.navigateTo(`/packageB/confirmdingdan/confirmdingdan?data=${JSON.stringify(data)}`)
			},
			
			// 获取技师
			getShifulist() {
				console.log(this.json,'-----')
				console.log(this.json.stationId)
				this.$req.get(`/xcx/manager/stationWorker/listAllWorkers/${this.json.stationId}`).then(res => {
					console.log(res)
					this.jishiArr = res.data.data;
					console.log(this.jishiArr)
				})

			},
			// 初始化时间戳 (后五天时间)
			initTime() {
				this.$req.get('/xcx/orderReservation/getTimes').then(res=>{
					console.log(res)
					this.timeArr = res.data.data
				})
			},
			// 添加爱车
			add() {
				this.$tab.navigateTo('/packageA/carManage/list');
			},
			// 获取汽车列表
			carList(){
				try{
					// 初始化/
					this.range = [];
					this.$req.get(`/xcx/userCars/listAllCars/`).then(res => {
						res.data.data.forEach(item=>{
							this.range.push({
								value:item.id,
								text:item.licensePlate
							})
						})
						this.value = this.range[0].id;//默认显示车牌号为第一个
					})
				}catch(err){
					console.log(err)
				}
			}


		}
	}
</script>
<style>
	page {
		background: #F4F5FA;
	}
</style>
<style scoped lang="scss">
	.bg12 {
		color: #126BC9;
	}

	.bg121 {
		color: #212121;
	}

	.M-L-30 {
		margin-left: 30rpx;
	}

	.M-T-30 {
		margin-top: 30rpx;
	}

	.M-T-24 {
		margin-top: 24rpx;
	}

	.M-L-24 {
		margin-top: 24rpx;
	}

	.M-R-24 {
		margin-top: 24rpx;
	}

	.M-R-30 {
		margin-right: 30rpx;
	}

	.width-100 {
		width: 100%;
	}

	.M-ALL-24 {
		margin-left: 24rpx;
	}

	.content {
		width: 100%;
		min-height: 100vh;
	}

	.appoint1_txt {
		font-weight: 600;
		font-size: 32rpx;
		color: #000000;
	}

	.title_txt {
		font-size: 32rpx;
		font-weight: Semibold;
		color: #212121;
	}

	// 卡片
	.appoint_card {
		height: 176rpx;
	}

	/* 按钮 */
	.two_button {
		width: 100%;
		height: 84rpx;

		.two_button_all {
			width: 100%;
			height: 84rpx;
			justify-content: space-between;

			.appoint1 {
				width: 330rpx;
				height: 84rpx;

				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: 600;
				font-size: 28rpx;

			}

			.appoint2 {
				width: 330rpx;
				height: 84rpx;

				// background: #126BC9;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: 600;
				font-size: 28rpx;
				// color: #FFFFFF;

			}
		}
	}

	.bg1 {
		background: #126BC9;
		color: #FFFFFF;
	}

	.bg2 {
		background: rgba(114, 119, 138, 0.1);
		color: #72778A;
	}

	// 填写信息
	.tianxieinfo {
		min-height: 648rpx;
	}

	.one {
		min-height: 800rpx;

		.one_one {
			height: 44rpx;

			.img {
				width: 30rpx;
				height: 30rpx;

			}

			.wode_txt {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
			}
		}

		.two {
			height: 548rpx;

			.two_two {
				width: 690rpx;
				height: 548rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.fn_two {
					height: 64rpx;
				}

				.fn_one {
					height: 64rpx;

					span {
						font-weight: 400;
						font-size: 28rpx;
						color: #212121;
					}

					.wode_button {
						width: 112rpx;
						height: 64rpx;
						background: #126BC9;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-weight: 600;
						font-size: 24rpx;
						color: #FFFFFF;
					}

					.inputs {
						width: 498rpx;
						height: 64rpx;
						background: #F6F6F6;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #000;
						text-align: left;
						padding-left: 16rpx;
					}
				}

				.fn_one2 {
					height: 200rpx;

					span {
						font-weight: 400;
						font-size: 28rpx;
						color: #212121;
					}

					.wode_button {
						width: 112rpx;
						height: 64rpx;
						background: #126BC9;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-weight: 600;
						font-size: 24rpx;
						color: #FFFFFF;
					}

					.wode_texteare {
						width: 466rpx;
						height: 162rpx;
						padding: 16rpx;
						font-size: 24rpx;
						background: #F6F6F6;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
					}

					.inputs {
						width: 498rpx;
						height: 64rpx;
						background: #F6F6F6;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-weight: 400;
						font-size: 12rpx;
						color: #000;
						text-align: left;
						padding-left: 16rpx;
					}
				}
			}
		}
	}

	.wode_select {
		width: 370rpx;
		height: 64rpx;
		background: #F6F6F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: none;
		margin-left: 58rpx;
	}

	/deep/ .plac_txt {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	// 底部导航栏
	.bottom_tabber {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 166rpx;
		background: rgba(255, 255, 255, 0.8);
		box-shadow: 0rpx -6rpx 47rpx 0rpx rgba(0, 0, 0, 0.05);
		z-index: 10000000;

		.fn1_one {
			justify-content: space-between;
			margin-top: 18rpx;
			width: 100%;
			height: 66rpx;

			span {
				font-weight: 600;
				font-size: 24rpx;
				color: #FF672D;
			}

			button {
				width: 406rpx;
				height: 66rpx;
				background: #126BC9;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-right: 30rpx;
			}

		}
	}

	.shifuInfo {
		min-height: 300rpx;

		.shifu_select {
			width: 100%;
			height: 202rpx;

			// border-radius: 24rpx 24rpx 24rpx 24rpx;
			.change_swiper {
				width: 690rpx;
				height: 202rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			}
		}

		.shifuInfo_all {
			width: 100%;
			height: 44rpx;

			img {
				width: 31rpx;
				height: 36rpx;
			}

			span {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
			}
		}
	}

	.scroll-view_H1 {
		display: flex;
		width: 690rpx;
		height: 118rpx;
		white-space: nowrap;

		.item {
			display: inline-flex;
			width: 24rpx;
			height: 100%;

			.item_all {
				width: 100%;
				height: 100%;
				padding-left: 30rpx;

				.time1 {
					font-weight: 600;
					font-size: 28rpx;
					color: #212121;
				}

				.time2 {
					font-weight: 400;
					font-size: 24rpx;
					color: #212121;
					margin-top: 10rpx;
				}

				.time3 {
					font-weight: 600;
					font-size: 28rpx;
					color: #126BC9;
				}

				.time4 {
					font-weight: 400;
					font-size: 24rpx;

					margin-top: 10rpx;
					color: #126BC9;
				}
			}
		}
	}

	.scroll-view_H {
		display: flex;
		width: 690rpx;

		height: 202rpx;
		white-space: nowrap;

		.item {
			display: inline-flex;
			width: 92rpx;
			height: 100%;

			.item_all {
				width: 100%;
				height: 100%;

				.name_txt {
					font-weight: 600;
					font-size: 24rpx;
					color: #000000;
				}

				.nianling_txt {
					font-weight: 400;
					font-size: 20rpx;
					color: #72778A;
				}

			}
		}
	}

	.arrvice_time {
		height: 400rpx;

		.wode_swiper {

			height: 306rpx;

			.fn_swiper {
				width: 690rpx;
				margin-left: 34rpx;
				margin-right: 34rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				height: 306rpx;

				.fn_swiper_top {
					width: 100%;
					height: 118rpx;
				}

				.fn_swiper_bottom {
					flex: 1;
				}
			}
		}

		.name_img {
			width: 100%;
			height: 44rpx;

			span {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
			}
		}
	}

	.wode_lines1 {
		width: 642rpx;
		height: 0rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #F6F6F6;
		margin-left: 30rpx;
	}

	.fn_swiper_bottom_one {
		justify-content: space-between;

		.baitian {
			font-weight: 400;
			font-size: 24rpx;
			color: #72778A;

		}

		.wanshang {
			font-weight: 600;
			font-size: 24rpx;
			color: #126BC9;

		}
	}

	.select_times {
		min-height: 94rpx;

		.select_times_all {
			min-height: 94rpx;
			margin-left: 24rpx;
			margin-right: 24rpx;
			flex-wrap: wrap;
			background: linear-gradient(90deg, #F0FEF0 0%, #EFFAFD 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid;
			border-image: linear-gradient(90deg, rgba(39, 135, 234, 1), rgba(38, 193, 239, 1)) 2 2;

			.one_time {
				min-width: 174rpx;
				height: 54rpx;
				background: rgba(18, 107, 201, 0.1);
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				span {
					font-weight: 400;
					font-size: 24rpx;
					color: #212121;
				}
			}

			.one_time2 {
				min-width: 174rpx;
				height: 54rpx;
				background: #126BC9;
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				span {
					font-weight: 600;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.one_time1 {
				min-width: 216rpx;
				height: 54rpx;
				background: rgba(114, 119, 138, 0.1);
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				.wode_kuai {
					width: 36rpx;
					height: 34rpx;
					background: #C34438;
					border-radius: 4rpx 4rpx 4rpx 4rpx;

					span {
						font-weight: 600;
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}

				span {
					font-weight: 400;
					font-size: 24rpx;
					color: #72778A;
				}
			}
		}
	}
</style>